{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '常用插件:example/plugin/index', '对话框'])}
<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <div class="card-body">

          <p>插件使用用jquery-confirm v3.3.4，文档地址：<a href="https://www.jquery-confirm.cn/" target="_blank">https://www.jquery-confirm.cn/</a></p>

          <div class="row">
            <div class="col-md-3">
              <p>优雅的警报。</p>
              <button class="btn btn-primary btn-block example-p-1">提示</button>
            </div>
            <div class="col-md-3">
              <p>堆叠确认</p>
              <button class="btn btn-primary btn-block example-p-2">确认</button>
            </div>
            <div class="col-md-3">
              <p>成功，错误，警告</p>
              <button class="btn btn-primary btn-block example-p-70-type">Alert 类型</button>
            </div>
            <div class="col-md-3">
              <p>需要输入吗？</p>
              <button class="btn btn-primary btn-block example-p-7-1">提示</button>
            </div>
          </div>

          <div class="row mt-3">
            <div class="col-md-3">
              <p>它也是一个对话框。</p>
              <button class="btn btn-primary btn-block example-p-4">对话框</button>
            </div>
            <div class="col-md-3">
              <p>不太重要的model</p>
              <button class="btn btn-primary btn-block example-p-3">背景消除</button>
            </div>
            <div class="col-md-3">
              <p>异部加载</p>
              <button class="btn btn-primary btn-block example-p-5">异部加载</button>
            </div>
            <div class="col-md-3">
              <p>一些动作可能很关键</p>
              <button class="btn btn-primary btn-block example-p-6">自动关闭</button>
            </div>
          </div>

          <div class="row mt-3">
            <div class="col-md-3">
              <p>响应按键</p>
              <button class="btn btn-primary btn-block example-p-7">Keystrokes</button>
            </div>
            <div class="col-md-3">
              <p>自动居中</p>
              <button class="btn btn-primary btn-block example-pc-1">Alignment</button>
            </div>
            <div class="col-md-3">
              <p>正在载入图片</p>
              <button class="btn btn-primary btn-block example-pc-2">Images</button>
            </div>
            <div class="col-md-3">
              <p>干净的动画</p>
              <button class="btn btn-primary btn-block example-pc-3">Animations</button>
            </div>
          </div>

          <div class="row mt-3">
            <div class="col-md-3">
              <p>可拖动的</p>
              <button class="btn btn-primary btn-block example-p-7-2">Draggable</button>
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>

  <script type="text/javascript">
    $(function (){
        $('.example-p-1').on('click',
    function() {
        $.alert({
            title: '警告框',
            content: '它一次可以顺利地做多次确认。<br>单击“确认”或“取消”以获取另一个模式',
            icon: 'mdi mdi-rocket',
            animation: 'scale',
            closeAnimation: 'scale',
            buttons: {
                okay: {
                    text: '确认',
                    btnClass: 'btn-blue'
                }
            }
        });
    });
    $('.example-p-2').on('click', function() {
        $.confirm({
            title: '安全的行动',
            content: '笑江湖浪迹十年游，空负少年头。对铜驼巷陌，吟情渺渺，心事悠悠！酒冷诗残梦断，南国正清秋。',
            icon: 'mdi mdi-comment-question',
            animation: 'scale',
            closeAnimation: 'scale',
            opacity: 0.5,
            buttons: {
                'confirm': {
                    text: '继续',
                    btnClass: 'btn-blue',
                    action: function() {
                        $.confirm({
                            title: '这也许很关键',
                            content: '关键行动可以有多个这样的确认。',
                            icon: 'mdi mdi-alert',
                            animation: 'scale',
                            closeAnimation: 'zoom',
                            buttons: {
                                confirm: {
                                    text: '是的，当然！',
                                    btnClass: 'btn-orange',
                                    action: function() {
                                        $.alert('一个非常关键的动作被 <strong>触发了!</strong>');
                                    }
                                },
                                '取消': function() {
                                    $.alert('您点击了 <strong>取消</strong>');
                                }
                            }
                        });
                    }
                },
                '取消': function() {
                    $.alert('您点击了 <strong>取消</strong>');
                },
                moreButtons: {
                    text: '其他',
                    action: function() {
                        $.alert('您点击了 <strong>其他</strong>');
                    }
                },
            }
        });
    });
    // 该效果因为div元素有overflow-x:hidden，输入框获取焦点后阴影效果不好看，所以在form-group上增加p-1
    $('.example-p-7-1').on('click', function() {
        $.confirm({
            title: '简单的形式',
            //content: 'url:form.html',  // 也可以采用url形式
            content: '<div class="form-group p-1 mb-0">' + 
                     '  <label class="control-label">您的名字</label>' +
                     '  <input autofocus="" type="text" id="input-name" placeholder="请输入您的名字" class="form-control">' +
                     '</div>',
            buttons: {
                sayMyName: {
                    text: '我的名字',
                    btnClass: 'btn-orange',
                    action: function() {
                        var input = this.$content.find('input#input-name');
                        var errorText = this.$content.find('.text-danger');
                        if (!$.trim(input.val())) {
                            $.alert({
                                content: "name 字段不能为空。",
                                type: 'red'
                            });
                            return false;
                        } else {
                            $.alert('您好！ ' + input.val() + ', 希望你今天过得愉快！');
                        }
                    }
                },
                '稍等': function() {}
            }
        });
    });
    $('.example-p-70-type').on('click', function() {
        $.alert({
            title: '错误提示',
            icon: 'mdi mdi-alert',
            type: 'orange',
            content: '有问题，请稍后再试。' + '<hr>' + '更多类型：red、green、orange、blue、purple、dark',
        });
    });
    $('.example-p-3').on('click', function() {
        $.alert({
            title: '背景消除',
            content: '单击模态框外部以将其关闭。',
            animation: 'scale',
            closeAnimation: 'bottom',
            backgroundDismiss: true,
            buttons: {
                okay: {
                    text: '确认',
                    btnClass: 'btn-blue',
                    action: function() {}
                }
            }
        });
    });
    $('.example-p-4').on('click', function() {
        $.dialog({
            title: '冰魄寒光剑',
            content: '如果只需要一个没有按钮的弹出窗口, <strong>没问题！</strong><br>' + '<h4>禁用所有按钮</h4>' + '<h5>然后你得到一个对话模态框</h5>' + '<h6>如果这里没有按钮，关闭图标就会显示出来 (你需要一些东西来关闭模态框。)</h6>' + '<button type="button" class="btn btn-success">单击我更改内容</button>',
            animation: 'scale',
            onOpen: function() {
                var that = this;
                this.$content.find('button').click(function() {
                    that.setContent('就这么简单！');
                })
            }
        });
    });
    $('.example-p-5').on('click', function() {
        $.dialog({
            title: '异步内容',
            content: 'url:README.md',
            animation: 'scale',
            columnClass: 'large',
            closeAnimation: 'scale',
            backgroundDismiss: true,
        });
    });
    $('.example-p-6').on('click', function() {
        $.confirm({
            title: '自动关闭',
            content: '有些动作可能很关键，用自动关闭来防止。计时器用完后，此对话框将自动触发取消。',
            autoClose: 'cancelAction|10000',
            escapeKey: 'cancelAction',
            buttons: {
                confirm: {
                    btnClass: 'btn-red',
                    text: '删除 Ben 的帐户',
                    action: function() {
                        $.alert('你删除了 Ben 的帐户！');
                    }
                },
                cancelAction: {
                    text: '取消',
                    action: function() {
                        $.alert('Ben 刚刚得救了！');
                    }
                }
            }
        });
    });
    $('.example-p-7').on('click', function() {
        $.confirm({
            title: '按键',
            escapeKey: true,
            content: '按 退出键 关闭模态框。按 回车键 触发正常。按 shift或ctrl键 触发取消。',
            backgroundDismiss: true,
            buttons: {
                okay: {
                    text: '确认',
                    keys: ['enter'],
                    action: function() {
                        $.alert('<strong>确认按钮</strong> 被触发。');
                    }
                },
                cancel: {
                    text: '取消',
                    keys: ['ctrl', 'shift'],
                    action: function() {
                        $.alert('<strong>取消按钮</strong> 被触发。');
                    }
                }
            },
        });
    });
    $('.example-pc-1').on('click', function() {
        $.confirm({
            title: '优雅地居中对齐',
            content: '<p>您可以添加内容，而不必担心对齐问题。我们的目标是制作一个交互式对话。</p>' + '<button type="button" class="btn btn-success">点击我增加更多内容</button><div id="contentArea"></div> ',
            buttons: {
                someButton: {
                    text: '增加内容',
                    btnClass: 'btn-green',
                    action: function() {
                        this.$content.find('#contentArea').append('<br>难消受灯昏罗帐，怅昙花一现恨难休！飘零惯，金戈铁马，拼葬荒丘！');
                        return false;
                    }
                },
                someOtherButton: {
                    text: '清除内容',
                    btnClass: 'btn-orange',
                    action: function() {
                        this.$content.find('#contentArea').html('');
                        return false;
                    }
                },
                '关闭': function() {}
            },
            onOpen: function() {
                var that = this;
                this.$content.find('button').click(function() {
                    that.$content.find('#contentArea').append('<br>这太棒了！！！！');
                });
            },
        });
    });
    $('.example-pc-2').on('click', function() {
        $.confirm({
            title: '添加图片',
            content: '<p>光年</p>' + '<img src="images/logo-sidebar.png">',
            animation: 'scale',
            animationClose: 'top',
            buttons: {
                confirm: {
                    text: '添加更多',
                    btnClass: 'btn-blue',
                    action: function() {
                        this.$content.append('<img src="images/loading-logo.png">');
                        return false;
                    }
                },
                '取消': function() {}
            },
        });
    });
    $(' .example-pc-3').on('click', function() {
        $.alert({
            title: '动画',
            content: 'jquery confirm提供了许多开箱即用的打开和关闭动画。<br>最棒的是，你也可以添加自定义的。',
            animation: 'scale',
            closeAnimation: 'right',
            buttons: {
                '放大': function() {
                    this.setCloseAnimation('zoom');
                },
                '旋转': function() {
                    this.setCloseAnimation('rotate');
                },
                '缩小': function() {
                    this.setCloseAnimation('scale');
                },
                '向上': function() {
                    this.setCloseAnimation('top');
                }
            },
            backgroundDismiss: function() {
                return false;
            },
        });
    });
    $('.example-p-7-2').on('click', function() {
        $.alert({
            title: '可拖动的对话',
            content: '此对话框是可拖动的，请使用标题将其拖动。它不会触碰屏幕边框。',
            type: 'blue',
            animation: 'scale',
            draggable: true,
        });
    })
    })
    </script>